<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	template="template/template.xhtml" xmlns:p="http://primefaces.org/ui">

	<ui:define name="title">User manage page</ui:define>
	<ui:define name="script">
		<script language="javascript">
			function scrollTo() {
				var objDiv = document.getElementById("editDiv");
				objDiv.scrollTop = objDiv.scrollIntoView();
			}
		</script>
	</ui:define>
	<ui:define name="menu">
		<ul>
			<li><a href='service.jsf'><span>Service</span></a></li>
			<li><a href='taxi.jsf'><span>Taxi</span></a></li>
			<li><a href='map-view.jsf'><span>Map</span></a></li>

			<li><a href='customer.jsf'><span>Customer</span></a></li>
			<li class="active"><a href='user.jsf'><span>User</span></a></li>

		</ul>
	</ui:define>
	<ui:define name="main-content">
		<div
			style="width: 960; min-height: 700px; margin-left: 10px; margin-right: 10px">
			<p:growl id="growl"></p:growl>
			<DIV style="text-align: center;">
				<script>
					$(document).ready(function() {
						$('#linktoadd').click(function() {
							$('html, body').animate({
								scrollTop : $('#addForm').offset().top
							}, 1000);
							return false;
						});
					});
				</script>
				<p:commandLink actionListener="#{userAdmin.addClick}" id="linktoadd"
					value="Click to add User" update=":addForm,:growl">
				</p:commandLink>
				<h:form>
				Search: <p:inputText value="#{userAdmin.query}" id="nameInput">
						<p:ajax event="keyup" listener="#{userAdmin.searchByQuery}"
							update=":userTable"></p:ajax>
					</p:inputText>
					<p:watermark value="Search by name" for="nameInput"></p:watermark>
					<br></br>
					<h:outputText value="(Name, Ex: Linh)"></h:outputText>
				</h:form>
			</DIV>
			<br></br>
			<hr style="border-color: gray;"></hr>
			<h:panelGroup id="userTable">
				<h:form id="contextMenu">
					<p:confirmDialog id="confirmDialog" message="Are you sure?"
						header="Initiating delete process" severity="alert"
						widgetVar="confirmation">

						<p:commandButton id="confirm" value="Yes Sure"
							update="tabledata,:growl" oncomplete="confirmation.hide()"
							actionListener="#{userAdmin.delete}" />
						<p:commandButton id="decline" value="Not Yet"
							onclick="confirmation.hide()" type="button" />
					</p:confirmDialog>

					<p:contextMenu for="tabledata">
						<p:menuitem value="Edit" actionListener="#{userAdmin.edit}"
							onclick="scrollTo()" rendered="#{!userAdmin.editBool}"
							update=":jobtable,contextMenu"></p:menuitem>
						<p:menuitem value="Delete" onclick="confirmation.show()"></p:menuitem>
					</p:contextMenu>
					<p:dataTable value="#{userAdmin.users}" id="tabledata"
						rendered="#{userAdmin.hasUser}" var="item" paginator="true"
						rows="10" rowsPerPageTemplate="5,10,15" selectionMode="single"
						paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
						selection="#{userAdmin.editedUser}" rowKey="#{item.userId}">
						<p:column style="text-align: center">
							<f:facet name="header">Id</f:facet>#{item.userId}
					</p:column>
						<p:column>
							<f:facet name="header">Name</f:facet>#{item.name}
					</p:column>
						<p:column style="text-align: center">
							<f:facet name="header">Username</f:facet>#{item.userName}
					</p:column>
						<p:column style="text-align:center">
							<f:facet name="header">Gender</f:facet>
							<h:outputText value="#{item.gender == false ? 'Male' : 'Female'}"></h:outputText>
						</p:column>
						<p:column>
							<f:facet name="header">Address</f:facet>#{item.address}
					</p:column>
						<p:column style="text-align:center">
							<f:facet name="header">Phone</f:facet>#{item.phoneNumber}
					</p:column>
						<p:column>
							<f:facet name="header">Email</f:facet>#{item.email}
					</p:column>
						<p:column style="text-align: center">
							<f:facet name="header">Active</f:facet>
							<h:outputText value="#{item.active == true ? 'yes' : 'no'}"></h:outputText>
						</p:column>
					</p:dataTable>
				</h:form>
			</h:panelGroup>
			<hr></hr>
			<h:panelGroup id="jobtable">
				<div
					style="float: left; margin-left: 50px; margin-top: 10px; margin-bottom: 10px">
					<h:form id="addForm">
						<p:panelGrid columns="2" style="width: 30%"
							rendered="#{userAdmin.addBool}" columnClasses="panelColumns">
							<f:facet name="header">Adding</f:facet>
							<h:outputText value="Name:"></h:outputText>
							<p:inputText value="#{userAdmin.user.name}" required="true"
								id="nameadd" maxlength="30" requiredMessage="Please give a name">
								<p:ajax event="blur" update=":growl"></p:ajax>
							</p:inputText>
							<h:outputText value="Username:"></h:outputText>
							<p:inputText value="#{userAdmin.user.userName}" required="true"
								widgetVar="usernameadd" maxlength="15"
								validator="#{userAdmin.checkUserName}"
								requiredMessage="Please give a username">
								<p:ajax event="blur" update=":growl"></p:ajax>
							</p:inputText>
							<h:outputText value="Password:"></h:outputText>
							<p:password value="#{userAdmin.user.password}" required="true"
								maxlength="15" requiredMessage="Please give a password">
								<p:ajax event="blur" update=":growl"></p:ajax>
							</p:password>
							<h:outputText value="Active"></h:outputText>
							<p:selectBooleanCheckbox value="#{userAdmin.user.active}"
								widgetVar="activeadd"></p:selectBooleanCheckbox>
							<f:facet name="footer">
								<p:commandButton value="Submit" update=":growl" ajax="false"
									actionListener="#{userAdmin.add}">
								</p:commandButton>
								<p:commandButton value="Cancel" update=":growl,:addForm"
									immediate="true" type="submit"
									actionListener="#{userAdmin.cancelAdd}"></p:commandButton>
							</f:facet>
						</p:panelGrid>
					</h:form>
				</div>
				<div id="editDiv"
					style="float: right; margin-right: 50px; margin-top: 10px; margin-bottom: 10px">
					<h:form id="editForm">
						<p:panelGrid columns="2" style="30%"
							rendered="#{userAdmin.editBool}" columnClasses="panelColumns">
							<f:facet name="header">Editing user #{userAdmin.editedUser.userId}</f:facet>
							<h:outputText value="Name:"></h:outputText>
							<p:inputText value="#{userAdmin.editedUser.name}" required="true"
								requiredMessage="Please input username">
								<p:ajax event="blur" update=":growl"></p:ajax>
							</p:inputText>
							<h:outputText value="Username:"></h:outputText>
							<p:inputText value="#{userAdmin.editedUser.userName}"
								required="true" widgetVar="usernameadd" maxlength="15"
								validator="#{userAdmin.checkUserNameEdit}"
								requiredMessage="Please give a username">
								<p:ajax event="blur" update=":growl"></p:ajax>
							</p:inputText>
							<h:outputText value="Gender:"></h:outputText>
							<p:selectOneMenu value="#{userAdmin.editedUser.gender}">
								<f:selectItem itemValue="false" itemLabel="Male"></f:selectItem>
								<f:selectItem itemValue="true" itemLabel="Female"></f:selectItem>
							</p:selectOneMenu>
							<h:outputText value="Email:"></h:outputText>
							<p:inputText value="#{userAdmin.editedUser.email}"
								required="true" requiredMessage="Please input an email"
								validatorMessage="Email is invalid">
								<f:validateRegex
									pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$"></f:validateRegex>
								<p:ajax event="blur" update=":growl"></p:ajax>
							</p:inputText>
							<h:outputText value="Phone number:"></h:outputText>
							<p:inputText value="#{userAdmin.editedUser.phoneNumber}"
								maxlength="11"></p:inputText>
							<h:outputText value="Birth day:"></h:outputText>
							<p:inputMask mask="99/99/9999"
								value="#{userAdmin.editedUser.birthDay}">
								<f:convertDateTime pattern="dd/MM/yyyy"></f:convertDateTime>
							</p:inputMask>
							<h:outputText value="Identify number:"></h:outputText>
							<p:inputText value="#{userAdmin.editedUser.identifyNumber}"
								maxlength="9"></p:inputText>
							<h:outputText value="Birh place:"></h:outputText>
							<p:inputTextarea rows="5" cols="23"
								value="#{userAdmin.editedUser.birthPlace}"></p:inputTextarea>
							<h:outputText value="Address:"></h:outputText>
							<p:inputTextarea rows="5" col="23"
								value="#{userAdmin.editedUser.address}"></p:inputTextarea>
							<h:outputText value="Active"></h:outputText>
							<p:selectBooleanCheckbox value="#{userAdmin.editedUser.active}"></p:selectBooleanCheckbox>
							<f:facet name="footer">
								<p:commandButton value="submit" ajax="false"
									actionListener="#{userAdmin.updateEdit}"></p:commandButton>
								<p:commandButton value="Cancel"
									actionListener="#{userAdmin.cancelEdit}" type="submit"
									immediate="true" update=":growl,:editForm,:contextMenu"></p:commandButton>
							</f:facet>
						</p:panelGrid>
					</h:form>
				</div>
			</h:panelGroup>
		</div>
	</ui:define>



</ui:composition>